import { ConfigService } from '../../../../core/common/config.service';
import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { Http } from '@angular/http';
import { ECharts } from 'echarts-ng2';
import { TranslateService } from '@ngx-translate/core';
declare var $: any;
@Component({
      selector: 'app-channelportal',
      templateUrl: './channelportal.component.html',
      styleUrls: ['./channelportal.component.scss']
})
export class ChannelPortalComponent implements OnInit, OnDestroy {
      @ViewChild('yuedushouru') yuedushouru: ECharts;
      @ViewChild('xiaoshoupaiming') xiaoshoupaiming: ECharts;
      public destroy = false;
      public shuju: any;
      public singleData1: any;
      public singleData2: any;
      public zhe1: any;
      public tongji1: any;
      public zhe = {
            title: {
                  text: '',
            },
            tooltip: {
                  trigger: 'axis',
            },
            grid: {
                  left: '7%',
                  bottom: '0',
                  containLabel: true
            },
            legend: {
                  data: []
            },
            toolbox: {
                  show: true,
                  feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar'] },
                        // restore: { show: true },
                        saveAsImage: { show: true }
                  }
            },
            calculable: true,
            xAxis: [
                  {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                  }
            ],
            yAxis: [
                  {
                        type: 'value'
                  }
            ],
            series: [
                  {
                        name: '',
                        type: 'line',

                        smooth: false,
                        itemStyle: { normal: { color: '#95B5CB', areaStyle: { type: 'default' } } },
                        data: []
                  }
            ]
      };
      public tongji = {
            // backgroundColor: "#344b58",
            title: {
                  text: '',
                  // subtext:
                  // x: "4%",
                  // textStyle: {
                  //     //color: '#fff',
                  //     fontSize: '16'
                  // },
                  // subtextStyle: {
                  //     color: '#90979c',
                  //     fontSize: '16',
                  // },
            },
            tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                        type: 'shadow',
                        textStyle: {
                              color: '#fff'
                        }
                  },
            },
            grid: {
                  borderWidth: 0,
                  left: '15%',
                  top: 110,
                  bottom: 65,
                  textStyle: {
                        color: '#fff'
                  }
            },
            legend: {
                  x: '4%',
                  top: '11%',
                  // textStyle: {
                  //     color: '#90979c',
                  // },
                  data: []
            },
            calculable: true,

            xAxis: [{
                  type: 'category',
                  axisLine: {
                        lineStyle: {
                              color: '#90979c'
                        }
                  },
                  splitLine: {
                        show: false
                  },
                  axisTick: {
                        show: false
                  },
                  splitArea: {
                        show: false
                  },
                  axisLabel: {
                        interval: 0,
                  },
                  data: []
            }],
            yAxis: [{
                  type: 'value',
                  splitLine: {
                        show: false
                  },
                  axisLine: {
                        lineStyle: {
                              color: '#90979c'
                        }
                  },
                  axisTick: {
                        show: false
                  },
                  axisLabel: {
                        interval: 0,
                  },
                  splitArea: {
                        show: false
                  },
            }],
            dataZoom: [{
                  show: true,
                  height: 30,
                  xAxisIndex: [
                        0
                  ],
                  // bottom: 30,
                  // start: 10,
                  // end: 80,
                  handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                  handleSize: '110%',
                  handleStyle: {
                        color: '#d3dee5',

                  },
                  textStyle: {
                        color: '#000'
                  },
                  borderColor: '#90979c'
            }, {
                  type: 'inside',
                  show: true,
                  height: 15,
                  start: 1,
                  end: 35
            }],
            series: []
      };
      constructor(public configService: ConfigService, public http: Http, private translate: TranslateService) { }
      ngOnInit() {
            $(window).resize(() => {
                  if (!this.destroy) {
                        this.yuedushouru.resize();
                        this.xiaoshoupaiming.resize();
                  }
            });
            this.translate.get('home.homepage.channelportal.left').subscribe((res: any) => {
                  this.zhe.title.text = res.monthlyIncome;
                  this.zhe.xAxis[0].data = res.month;
                  this.zhe.legend.data = [res.income];
                  this.zhe.series[0].name = res.income;
            });
            this.translate.get('home.homepage.channelportal.salesRank').subscribe((res: any) => {
                  this.tongji.title.text = res;
            });
            this.data1();
            this.data2();
            this.data3();
            this.initTableData1();
            this.initTableData2();
      }
      ngOnDestroy() {
            this.destroy = true;
      }
      public data1() {
            const url = this.configService.get('url') + '?service=ChnlDashboard&method=getChnlCount';
            this.http.post(url, null).toPromise().then(data => {
                  if (data.json().code === '0000') {
                        this.shuju = data.json().info;
                        // console.log(this.shuju);
                  }else {
                        console.log(data.json().message);
                  }
            });
      }
      public data2() {
            const url = this.configService.get('url') + '?service=ChnlDashboard&method=getChnlCountByMonth';
            this.http.post(url, null).toPromise().then(data => {
                  if (data.json().code === '0000') {
                        this.zhe1 = data.json().info;
                        // console.log(this.zhe1);
                        // this.zhe.xAxis[0].data = this.zhe1.month;
                        this.zhe.series[0].data = this.zhe1.data;
                        this.yuedushouru.setOption(this.zhe);
                  }else {
                        console.log(data.json().message);
                  }
            });
      }
      public data3() {
            const url = this.configService.get('url') + '?service=ChnlDashboard&method=getProductCount';
            this.http.post(url, null).toPromise().then(data => {
                  if (data.json().code === '0000') {
                        const series = [];
                        const legend = [];
                        this.tongji1 = data.json().info;
                        // console.log(this.tongji1);
                        // console.log(this.tongji1.name.length);
                        const arr = new Array(this.tongji1.name.length);
                        arr.fill(0);
                        // console.log(arr);
                        // console.log(this.tongji1);
                        this.tongji.xAxis[0].data = this.tongji1.name;
                        // console.log(this.tongji1.data);
                        this.tongji1.data.forEach(function (item, i) {
                              // console.log(item);
                              // console.log(i);
                              series.push({
                                    'name': item.name,
                                    'type': 'bar',
                                    'stack': '总量',
                                    'barMaxWidth': 25,
                                    'barGap': '10%',
                                    'itemStyle': {
                                          'normal': {
                                                // "color": "rgba(255,144,128,1)",
                                                'label': {
                                                      'show': false,
                                                }
                                          }
                                    },
                                    'data': item.data
                              });
                              for (let j = 0; j < item.data.length; j++) {
                                    // console.log(item.data[j]);
                                    arr[j] += parseFloat(item.data[j]);
                              }
                              legend.push(item.name);
                        });
                        // console.log(arr);
                        series.push({
                              'name': '总数',
                              'type': 'line',
                              'stack': '总量',
                              'symbolSize': 10,
                              'symbol': 'circle',
                              'itemStyle': {
                                    'normal': {
                                          'color': 'rgba(252,230,48,1)',
                                          'barBorderRadius': 0,
                                          'label': {
                                                'show': true,
                                                'position': 'top',
                                                'formatter': function (p) {
                                                      return p.value > 0 ? (p.value) : '';
                                                }
                                          }
                                    }
                              },
                              'data': arr
                        });
                        legend.push('总数');
                        // console.log(legend);
                        this.tongji.series = series;
                        this.tongji.legend.data = legend;
                        // console.log(this.tongji.series)
                        this.tongji.xAxis[0].data = this.tongji1.name;
                        this.xiaoshoupaiming.setOption(this.tongji);
                  }else {
                        console.log(data.json().message);
                  }
            });
      }
      public initTableData1(): void {
            const url = this.configService.get('url') + '?service=ChnlDashboard&method=getOrderList';
            this.http.post(url, null).toPromise().then(data => {
                  if (data.json().code === '0000') {
                        this.singleData1 = data.json().info;
                        // console.log(this.singleData1);
                  }else {
                        console.log(data.json().message);
                  }
            });
      }
      public initTableData2(): void {
            const url = this.configService.get('url') + '?service=ChnlDashboard&method=getSalePerformanceList';
            this.http.post(url, null).toPromise().then(data => {
                  if (data.json().code === '0000') {
                        this.singleData2 = data.json().info;
                  }else {
                        console.log(data.json().message);
                  }
            });
      }
}
